<template>
  <div class="continer">
    <div class="home_pages">
      <div class="person_contents">
        <div>
          <img src="../assets/deault_imgs.png" />
        </div>
        <div class="person_informatons">
          <div class="full_name">limeimei</div>
          <div class="Edad Ages">18岁</div>
          <div class="Edad Constelación">双子座</div>
        </div>
      </div>
      <!-- 好友动态 -->
      <div class="friend_dynamic">
        <div class="friend_content">
          <!-- list_id -->
          <div class="list" @click="list_dynamic(1)">
            <div>
              <img src="../assets/otherPage/thumbs_deaults.png" />
            </div>
            <div :class="list_id == 1 ? 'list_selected' : ''">点赞</div>
          </div>
          <!-- //2 -->
          <div class="list" @click="list_visitor(2)">
            <div>
              <img src="../assets/otherPage/greet.png" />
            </div>
            <div :class="list_id == 2 ? 'list_selected' : ''">聊天</div>
          </div>
          <!-- 3 -->
          <div class="list" @click="list_Myvisitor(33)">
            <div>
              <img src="../assets/otherPage/complaint.png" />
            </div>
            <div :class="list_id == 3 ? 'list_selected' : ''">举报</div>
          </div>
          <!-- 4 -->
          <div class="list" @click="list_Mevisitor(4)">
            <div>
              <img src="../assets/otherPage/shield.png" />
            </div>
            <div :class="list_id == 4 ? 'list_selected' : ''">屏蔽</div>
          </div>
          <!--5  -->
          <div class="list" @click="list_mythumb(5)">
            <div>
              <img src="../assets/otherPage/translate.png" />
            </div>
            <div :class="list_id == 5 ? 'list_selected' : ''">送翻译包</div>
          </div>
          <!-- 6 -->
          <div class="list" @click="upgrade(6)">
            <div>
              <img src="../assets/otherPage/upgrade.png" />
            </div>
            <div :class="list_id == 6 ? 'list_selected' : ''">为TA升级</div>
          </div>
          <!-- 77 -->
          <div class="list" @click="album(7)">
            <div>
              <img src="../assets/otherPage/album.png" />
            </div>
            <div :class="list_id == 7 ? 'list_selected' : ''">相册</div>
          </div>
          <!--  -->
        </div>
      </div>
      <!-- 联系客服 -->
      <!-- <div class="customerService"> -->
      <!-- <div class="custom_content"> -->
      <!-- <img src="../assets/personal/customerService.png" /> -->
      <!-- </div> -->
      <!-- </div> -->
    </div>
    <IllegalReporting @closes="close_complain" v-if="is_complaint" />
    <!-- 赠送翻译包 -->
    <TranslPackage @closes="close_complain" v-if="is_translPackage" />
    <!-- 为TA升级 -->
    <UpgrMember @closes="close_complain" v-if="is_upgrMember" />
  </div>
</template>
<script>
//index.vue
// 赠送翻译包
import TranslPackage from "../components/TranslationPackage.vue";
//为TA升级
import UpgrMember from "../components/UpgradeMember.vue";
import { getList } from "../utils/http.js";
export default {
  name: "Person",
  components: {
    TranslPackage,
    UpgrMember,
  },
  data: () => ({
    list_id: 1,
    imgsrc: "../assets/personal/dyn_able.png",
    is_complaint: false, //是否显示举报的弹框
    is_translPackage: false, //是否显示翻译包弹框
    is_upgrMember: false, //是否显示升级弹框
  }),
  mounted() {
    this.getPage();
  },
  methods: {
    getPage() {
      var param = {
        Name: "HUDIE123456",
        Password: "YANHe123",
      };
      getList(param).then((res) => {
       layer.msg("弱弱的提示");
      });
    },
    // 好友动态
    list_dynamic(val) {
      this.list_id = val;
      this.$emit("list_dynamic", val);
    },
    //我的访客
    list_visitor(val) {
      this.list_id = val;
      layer.msg("进入聊天页面！");
      this.$emit("list_visitor", val);
    },
    //举报
    list_Myvisitor(val) {
      //
      this.list_id = val;
      this.Illegal();
      this.$emit('list_Myvisitor',val)
    },
    //屏蔽
    list_Mevisitor(val) {
      this.list_id = val;
      this.$emit("list_Mevisitor", val);
      layer.msg("屏蔽成功！");
    },
    //增送翻译包
    list_mythumb(val) {
      this.list_id = val;
      this.is_translPackage = true;
      this.$emit('list_mythumb',val)
    },
    //升级会员
    upgrade(val) {
      this.list_id = val;
      this.is_upgrMember = true;
      this.$emit('upgrade',val)
    },
    //相册
    album(val){
       this.list_id = val;
       this.$emit('album',val)
    },
    Illegal() {
      //举报、投诉
      this.is_complaint = true;
    },
    close_complain() {
      this.is_complaint = false;
      this.is_translPackage = false; //是否显示翻译包弹框
      this.is_upgrMember = false; //是否显示升级弹框
    },
  },
};
</script>   
<style>
html {
  background-color: #eff2fc;
}
</style>
<style scoped  lang="less">
.continer {
  width: 25.5%;
  background-color: #eff2fc;
}
.home_pages {
  width: 100%;
}
.person_contents {
  background-color: #ffffff;
  border-radius: 10px;
}
.person_informatons {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  text-align: center;
  padding-bottom: 15px;
}
.full_name {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0e0e0e;
}
.Edad {
  background: #eff2fc;
  opacity: 0.8;
  border-radius: 6px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  padding: 0.2rem 0.3rem;
}
.Ages {
  margin-left: 1.5rem;
  margin-right: 1rem;
}
.peron_ico {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;
}
.peron_ico img {
  width: 3rem;
  height: 3rem;
}
.list_text {
  position: relative;
  bottom: 15px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #666666;
}
.birth_day {
  font-size: 12px !important;
  font-family: PingFang SC;
  font-weight: 400 !important;
  color: #999999 !important;
}
.friend_dynamic {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  padding-bottom: 15px;
  padding-top: 15px;
}
.friend_content {
  width: 72%;
  margin: 0 auto;
}
.list {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 3.5rem;
}
.list_selected {
  color: #4064e3;
}
.list img {
  margin-right: 1rem;
  width: 1.2rem;
  height: 1.2rem;
}
.customerService {
  margin-top: 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.custom_content {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5px;
  padding-top: 5px;
}
</style>  